<template>
  <view class="root">
    <acme-app-bar title="AppBar"></acme-app-bar>
    
    <view class="ui-title">基础用法</view>
    <acme-app-bar title="AppBar" :isFixed="false"></acme-app-bar>
    
    <view class="ui-title">定义左侧右侧文字</view>
    <acme-app-bar title="AppBar" :isFixed="false"  left-text="返回" right-text="分享"></acme-app-bar>
    
    <view class="ui-title">自定义右侧内容</view>
    <acme-app-bar title="AppBar" :isFixed="false">
      <view slot="right" class="right-wrap">
        <view class="right-icon">
          <uni-icons type="redo" size="20" color="#666"/>
        </view>
        <view class="right-icon">
          <uni-icons type="info" size="20" color="#666"/>
        </view>
      </view>
    </acme-app-bar>
    
    <view class="ui-title">搜索导航栏</view>
    <acme-app-bar v-model="keywords" :isFixed="false" right-text="搜索" 
      @rightClick="rightClick" search :focus="false"
    />
    
    <view class="ui-title">搜索导航栏</view>
    <acme-app-bar v-model="keywords" :isFixed="false" right-text="取消" 
      :isBack="false" search :focus="false" style="padding-left: 24rpx"
    />
  </view>
</template>

<script>
  export default {
    data() {
      return {
        keywords: ''
      };
    },
    methods: {
      rightClick() {
        
      }
    },
  };
</script>

<style lang="scss" scoped>
  .root {
    .right-wrap {
      display: flex;
      
      .right-icon {
        display: flex;
        padding: 0 25upx;
      }
    }
  }
</style>